<!--
 * @Author: your name
 * @Date: 2020-12-17 12:29:01
 * @LastEditTime: 2020-12-28 09:20:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\warranty\extendedManagement\add.vue
-->
<template>
    <div class="extendedManagement-add-modal">
        <el-dialog
        :title="$t('edit')"
        :visible="visibleAdd"
        class="el-dialog-lg"
        @close="()=>{$store.commit('setVisibleAdd',false)}" width="35%">
            <el-form ref="form" :model="form" label-width="200px" >
                <el-row :gutter="24">
                    <el-col :span="20" :offset="0">
                        <el-form-item :label="$t('warrantyNational')" prop="region" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.region" filterable :placeholder="$t('index.selectStates')" clearable >
                                <el-option
                                    v-for="item in CountryList"
                                    :key="item.code"
                                    :label="item.code"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('device.inverter.nation')" prop="enName" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.enName" filterable :placeholder="$t('index.selectStates')" clearable >
                                <el-option
                                    v-for="item in nationList"
                                    :key="item.enName"
                                    :label="item.enName"
                                    :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('extendedManagement.Years')" prop="delayTime" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.delayTime" :placeholder="$t('pleaseInput')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleAdd',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        editModalData:{
            type:Object,
            default:()=>{return {}}
        },
        nationList:{
            type:Array,
            default:()=>{return []}
        },
        CountryList:{
            type:Array,
            default:()=>{return []}
        },
    },
    data() {
        return {
            form:{
                region:"Asia",
                enName:"",
                delayTime:"",
            }
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        }
    },
    watch: {
        editModalData:{
            handler(nv,ov){
                if(nv){
                    this.form.region = nv.region || 'Asia'
                    this.form.enName = nv.enName
                    this.form.delayTime = nv.delayTime
                }
            }
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        async delayCodeCreate(){
            let res = await this.API.crmcountryUpdate(Object.assign({},this.form,{
                id:this.editModalData.id
            }))
            if(this.comm.showMsg(res.success)){
                this.$store.commit('setVisibleAdd',false)
                this.$emit('uploadData',true)
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.delayCodeCreate()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
    },
};
</script>

<style  lang="less" scoped>

</style>

